<template>
	<div class="bg-white px-3 goods_create" style="margin: -20px;margin-top: -1rem;margin-bottom: 0 !important;">
		<router-link :to="{name: 'shop_goods_list'}"
		style="position: absolute;top: 12px;left: 200px;">
			<el-button type="primary" size="mini">回到商品列表</el-button>
		</router-link>
		

		<el-form label-width="80px">
			<el-form-item label="商品类型">
				<el-select v-model="goods_type_id"
				placeholder="请选择商品类型"
				@change="change"
				>
					<el-option :label="item.name" :value="item.id"
					v-for="(item, index) in typeOptions" :key="index">
						
					</el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>商品属性</span>
			</div>
			<el-form label-width="80px" >
				<el-form-item :label="item.name"
				style="width: 40%;"
				v-for="(item, index) in goods_type_values" :key="index">
					<el-input v-if="item.type === 'input'" v-model="item.value"></el-input>
					<el-radio-group v-else-if="item.type === 'radio'" v-model="item.value">
						<el-radio :label="item2"
						v-for="(item2, index2) in item.default" :key="item2"
						style="margin: 0;"
						class="mr-2">{{item2}}</el-radio>
					</el-radio-group>
					<el-checkbox-group v-else-if="item.type === 'checkbox'" v-model="item.value">
						<el-checkbox :label="item2" 
						v-for="(item2, index2) in item.default" :key="index2"></el-checkbox>
					</el-checkbox-group>
				</el-form-item>
			</el-form>
		</el-card>
		
		<el-button type="primary" style="position: fixed;right: 50px;bottom: 50px;"
		@click="submit">提交</el-button>
	</div>
</template>

<script>

export default {
	
	inject:['app', 'layout'],

	computed: {

	},
	
	created() {
		this.id = this.$route.params.id
		if(!this.id) {
			this.$message({
				message: '非法参数',
				type: 'error'
			});
			return this.$router.push({
				name: "shop_goods_list"
			})
		}
		//获取之前的商品详情
		this.layout.showLoading()
		this.axios.get('/admin/goods/read/' + this.id, {token: true}).then(res => {
			let data = res.data.data
			console.log('data', data)
			this.typeOptions = data.types
			this.goods_type_values = data.goodsAttrs.map(item => {
				if(item.type !== 'input') {
					item.default = item.default.split(',')
					if(item.type === 'checkbox') {
						item.value = item.value ? item.value.split(',') : []
					}
				}
				return item
			})
			console.log(this.goods_type_values)
			this.layout.hideLoading()
		}).catch(err => {
			this.layout.hideLoading()
		})
	},
	
	data() {
		return {
			goods_type_id: '',
			
			typeOptions: [],
			
			goods_type_values: []
		}
	},
	
	methods: {
		deepCopy(o) {
		    if (o instanceof Array) {
		        var n = [];
		        for (var i = 0; i < o.length; ++i) {
		            n[i] = this.deepCopy(o[i]);
		        }
		        return n;
		
		    } else if (o instanceof Object) {
		        var n = {}
		        for (var i in o) {
		            n[i] = this.deepCopy(o[i]);
		        }
		        return n;
		    } else {
		        return o;
		    }
		},
		
		submit() {
			let goodsAttrs = this.deepCopy(this.goods_type_values)
			goodsAttrs = goodsAttrs.map(item => {
					if(item.type !== 'input') {
						item.default = item.default.join(',')
						if(item.type === 'checkbox') {
							item.value = item.value.join(',')
						}
					}
					return item
				})
			console.log(goodsAttrs)
			this.layout.showLoading()
			this.axios.post('/admin/goods/attrs/' + this.id, {
				goods_attrs: goodsAttrs
				
			},{token: true}).then(res => {
				this.$message({
					message: '修改商品属性成功',
					type: 'success'
				});
				this.layout.hideLoading()
				this.$router.push({
					name: "shop_goods_list"
				})
			}).catch(err => {
				this.layout.hideLoading()
			})
		},
		
		change(id) {
			let index = this.typeOptions.findIndex(item => item.id === id)
			if(index === -1) {
				return this.goods_type_values = []
			}
			let options = this.typeOptions[index].goods_type_values
			this.goods_type_values = options.map(item => {
				let tmp = []
				if(item.type !== 'input'){
					tmp = item.default ? item.default.split(',') : []
				}
				return {
					goods_id: this.id,
					value: '',
					name: item.name,
					default: tmp,
					type: item.type
				}
			})
			console.log(this.goods_type_values)
		},
	},
	

}
</script>

<style>
	.goods_create .el-form-item{
		margin-bottom: 15px;
	}
</style>
